<!--
 * @Author: 杨超
 * @Date: 2021-11-24 20:33:45
 * @LastEditTime: 2021-11-30 11:55:15
 * @LastEditors: 杨超
 * @Description:
-->
<template>
    <!-- 普通输入框 -->
    <div :style="item.style || {}" :class="`form-unqiue-${item.key} ${getTextModel ? '' : 'wti-untext-box'}`" class="form-input-box form-item-box">
        <el-input
            v-if="!getTextModel"
            v-model.trim="val"
            class="location-input"
            :class="{ 'placeholder-error-tip': error }"
            :placeholder="error || ''"
            type="text"
            :disabled="getDisabled"
            :clearable="true"
            v-bind="bindOptions"
        >
            <template slot="append">
                <div class="location-icon" @click="showMap(false)">
                    <i class="el-icon-map-location"></i>
                </div>
            </template>
        </el-input>
        <div v-else :style="item.textStyle || {}">
            <span v-if="prepend" class="prepend-msg">{{ prepend }}</span>
            <div class="detail-wrap">
                <span class="detail-text g-line-1">{{ val || '-' }}</span>
                <div class="location-icon detail-location-icon" @click="showMap(true)">
                    <i class="el-icon-map-location"></i>
                </div>
            </div>
            <span v-if="append" class="append-msg">{{ append }}</span>
        </div>
        <GetMapLocation ref="mapLocation" @location="getlatandlng" />
    </div>
</template>

<script>
import GetMapLocation from '@/components/GetMapLocation'
import FormMixin from './mixin'

export default {
    name: 'FormLocation',
    components: {
        GetMapLocation
    },
    mixins: [FormMixin],
    data() {
        return {
            drawCurrentType: ''
        }
    },
    computed: {
        // 前置符号
        prepend() {
            // 兼容性处理
            if (this.item.prepend) {
                return this.item.prepend
            } else if (this.item.prependMsg) {
                return this.item.prependMsg
            } else if (this.item.prefixMsg) {
                return this.item.prefixMsg
            } else {
                return ''
            }
        },
        // 后置符号
        append() {
            // 兼容性处理
            if (this.item.append) {
                return this.item.append
            } else if (this.item.appendMsg) {
                return this.item.appendMsg
            } else if (this.item.suffixMsg) {
                return this.item.suffixMsg
            } else {
                return ''
            }
        }
    },
    methods: {
        showMap(isDetail) {
            if (this.getDisabled) { return }
            this.$refs.mapLocation.show(this.val, this.item.drawType, this.drawCurrentType || this.item.drawCurrentType, isDetail)
        },
        getlatandlng(val) {
            this.statusChangeFn.updateFormData({
                drawType: val.type
            }, true)
            this.drawCurrentType = val.type
            this.$emit('input', val.value)
        }
    }
}
</script>
<style lang="scss" scoped>
.location-input ::v-deep .el-input-group__append {
    padding: 0;
}
.location-icon {
    padding: 0 16px;
    cursor: pointer;
}
.detail-wrap {
    display: flex;
}
.detail-text {
    flex: 1;
    padding: 0 15px;
}
.detail-location-icon {
    background-color: #F5F7FA;
    vertical-align: middle;
    white-space: nowrap;
}
</style>
